<!-- 商品详情页参数选择弹出层组件 -->
<template>
  <div class="cart_para">
    <nut-cell
      :title="parameterShow"
      is-link
      @click="show.showRound = true"
    >
    </nut-cell>
    <div
      class="msg"
      v-show='success'
    >
      <img
        src="../assets/images/空心对勾.png"
        alt=""
      >
      <p>加入购物车成功</p>
    </div>
    <nut-popup
      position="bottom"
      closeable
      round
      :style="{ height: '75%'}"
      v-model:visible="this.show.showRound"
    >
      <div class="popUp">
        <div class="product_img">
          <div class="img">
            <img
              :src="this.img"
              alt=""
            >
          </div>

          <div class="information">
            <div class="price">
              <p>￥139.90</p>
            </div>
            <div class="inventory">
              <p>库存171件</p>
            </div>
            <div class="select">
              <p>已选:"{{colorShow}} {{sizeShow}}" </p>
            </div>
          </div>
        </div>
        <!-- 颜色选择 -->
        <div class="color">
          <div class="title">
            <h3>颜色分类</h3>
          </div>
          <div class="button">
            <nut-button
              shape="square"
              size="mini"
              type="primary"
              color="rgba(248, 248, 248, 1)"
              v-for="(item,index) in colorList"
              :key="item"
              :class="{btn_active:color===index}"
              @click="colorChange(item,index)"
            >{{item.title}}</nut-button>
          </div>
        </div>
        <nut-divider :style="{borderColor: '#1989fa', width:'92%'}">
        </nut-divider>
        <!-- 尺寸选择 -->
        <div class="size">
          <div class="title">
            <h3>尺寸</h3>
          </div>
          <div class="button">
            <nut-button
              shape="square"
              size="mini"
              type="primary"
              color="rgba(248, 248, 248, 1)"
              v-for="(item,index) in sizeList"
              :key="item"
              :class="{btn_active:size===index}"
              @click="sizeChange(item,index)"
            >{{item.title}}</nut-button>
          </div>
        </div>
        <nut-divider :style="{borderColor: '#1989fa', width:'92%'}">
        </nut-divider>
        <!-- 操作按钮 -->
        <div class="bottom_btn">
          <nut-button
            shape="square"
            type="primary"
            class="add"
            color="#f0d5b8"
            @click="addGoods"
          >
            <p>加入购物车</p>
          </nut-button>
          <nut-button
            shape="square"
            type="primary"
            class="buy"
            color="#c1ab96"
            @click="settle"
          >
            <p>立即购买</p>
          </nut-button>
        </div>
      </div>
    </nut-popup>

  </div>
</template>

<script>
import { mapState } from 'vuex'
import { addCart } from '@/api/product.js';
export default {
  props: ['img'],
  data () {
    return {
      // 参数展示
      selected: '',
      // 点击参数弹出层
      state: { showRound: false, },
      // 弹出层按钮选择参数
      colorList: [
        { title: '淡金色' },
        { title: '渐变金' },
        { title: '樱花粉' },
        { title: '赤金色' },
      ],
      sizeList: [
        { title: '5cm' },
        { title: '10cm' },
        { title: '12cm' },
        { title: '15cm' },
      ],
      color: 0,
      size: 0,
      // 选择的颜色
      colorShow: '淡金色',
      // 选择的尺寸
      sizeShow: '5cm',
      // 颜色尺寸展示
      parameterShow: '',
      // 添加结算商品的id
      id: 0,
      // 加入购物车成功
      success: false
    }
  },
  mounted () {

  },
  methods: {
    // 颜色按钮样式事件
    colorChange (item, index) {
      console.log(this.showRound);
      this.color = index
      this.colorShow = item.title
      this.parameterShow = this.colorShow + this.sizeShow
    },
    // 尺寸按钮样式事件
    sizeChange (item, index) {
      this.size = index
      this.sizeShow = item.title
      this.parameterShow = this.colorShow + this.sizeShow
    },
    // 点击加入购物车
    addGoods () {
      this.show.showRound = false
      // 加入成功弹窗
      this.success = true
      setTimeout(() => {
        this.success = false
      }, 1000);
      // 按商品列表顺序逐一添加
      this.id++
      if (this.id > 5) {
        this.id = 0
      }
      let goods_id = this.goodsList[this.id].id
      addCart(goods_id, 1).then(res => {
        console.log(res);
      }).catch(err => {
        console.log(err);
      })
    },
    // 点击立即购买跳转结算界面
    settle () {
      let arr = []
      arr.push(this.goodsList[1].id)
      this.$router.push({ name: 'orderSettlement', params: { list: [arr] } });
    },
  },
  computed: {
    ...mapState(['figureList', 'goodsList', 'show'])
  },
  watch: {
    // 颜色尺寸展示
    parameterShow: {
      handler () {
        this.parameterShow = this.colorShow + " " + "【" + this.sizeShow + "】"
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
.msg {
  position: fixed;
  width: 150px;
  height: 100px;
  border-radius: 5px;
  background-color: #474645;
  opacity: 0.6;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  img {
    width: 30px;
    height: 30px;
  }
  p {
    color: #fff;
    font-size: 14px;
  }
}
.parameter_msg {
  height: 18px;
  position: absolute;
  top: 0;
  left: 25%;
  border: none;
  color: rgb(193, 171, 150);
}
::v-deep.nut-cell,
.nut-cell--clickable {
  padding: 0;
  margin: 0;
  border: none;
  box-shadow: none;
  color: rgb(193, 171, 150);
  font-weight: bold;
}

::v-deep .nut-button__warp {
  color: #000;
}

::v-deep .nut-popup,
.round,
.popup-bottom {
  .popUp {
    width: 92%;
    padding: 15px;
    .product_img {
      display: flex;
      flex-direction: row;
      .img {
        width: 130px;
        height: 130px;
        border-radius: 5px;
        overflow: hidden;
        img {
          width: 130px;
          height: 130px;
          transform: scale(1.06);
        }
      }
      .information {
        padding: 30px 0 20px 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .price {
          color: #d1082a;
          font-weight: 700;
          font-size: 20px;
        }
        .inventory {
          font-weight: 400;
          font-style: normal;
          font-size: 12px;
          color: #aeaeae;
        }
        .select {
          font-weight: 400;
          font-size: 12px;
        }
      }
    }
    .color {
      margin-top: 30px;
      h3 {
        font-size: 14px;
        text-align: left;
        font-weight: 400;
        color: #363636;
      }
      .button {
        margin-top: 10px;
        .nut-button {
          width: 68px;
          height: 38px;
          margin-right: 10px;
          .nut-button__warp {
            color: black;
          }
        }
      }
    }
    .size {
      @extend .color;
      margin-top: 10px;
    }
    .bottom_btn {
      width: 92%;
      display: flex;
      justify-content: center;
      position: absolute;
      bottom: 20px;
      .add {
        width: 173px;
        height: 35px;
        border-radius: 17.5px 0 0 17.5px;
        p {
          color: #ffff;
        }
      }
      .buy {
        width: 173px;
        height: 35px;
        border-radius: 0 17.5px 17.5px 0;
        p {
          color: #ffff;
        }
      }
    }
  }
}
::v-deep .btn_active {
  border-width: 1px;
  border-style: solid;
  border-color: rgba(240, 213, 184, 1);
  border-radius: 6px;
  .nut-button__warp {
    color: rgba(240, 213, 184, 1);
  }
}
</style>